import appendStyle from "./appendStyle.js";
import execTimeout from "./execTimeout.js";
appendStyle(`
.vuc-pc-message{
  position: absolute;
  top: 0;
  left: 50%;
}
.vuc-pc-message li{
  min-width: 200px;
  margin-top: 0;
  white-space: nowrap;
  top: 0;
  left: 50%;
  transform: translate(-50%, -000%);
  padding: 0 20px;
  color: #fff;
  border-radius: 4px;
  opacity: 0;
  box-shadow: 0 0 4px #000;
  transition: all .3s;
  font-size: 12px;
  line-height: 12px;
  height: 0;
  overflow: hidden;
  background-color: rgba(255,255,255,1);
}
.vuc-pc-message li.tip{
  color: red;
  border: 1px solid red;
}
.vuc-pc-message li.warn{
  color: orange;
  border: 1px solid orange;
}
.vuc-pc-message li.height{
  margin-top: 10px;
  height: 32px;
  padding: 10px 20px;
}
.vuc-pc-message li.active{
  opacity: 1;
  transform: translate(-50%, 40px);
}`);

let messageBox;
function Messages() {
  messageBox = messageBox || document.createElement("ul");
  messageBox.className = "vuc-pc-message";
  this.cacheList = [];
  this.wrap = messageBox;
  document.body.appendChild(messageBox);
}

Messages.prototype.makeEl = function (type) {
  const show = {
    time: 10,
    fn: () => {
      conf.el.className = `${conf.type} height active`;
      execTimeout(stay);
    }
  };
  const stay = {
    time: 1300, fn: () => {
      conf.el.className = `${conf.type} height`;
      execTimeout(stayHeight);
    }
  };
  const stayHeight = {
    time: 310, fn: () => {
      conf.el.className = `${conf.type}`;
      execTimeout(end);
    }
  };
  const end = {
    time: 310, fn: () => {
      try {
        conf.el.parentNode.removeChild(conf.el);
        this.cacheList.push(conf);
      } catch (e) {
      }
    }
  };
  let el = document.createElement("li");
  const conf = {type, el, show}
  return conf;
}
Messages.prototype.enter = function (type, msg) {
  const conf = this.cacheList.shift() || this.makeEl(type);
  const {el, show} = conf;
  conf.type = type;
  el.className = `${conf.type} height`;
  el.innerHTML = msg;
  this.wrap.appendChild(el);
  execTimeout(show);
};
Messages.prototype.tip = function (msg) {
  this.enter("tip", msg);
};
Messages.prototype.warn = function (msg) {
  this.enter("warn", msg);
};

export default Messages;
